import React, { Component } from "react";
import { Table, DatePicker, Input, message } from "antd";
import moment from "moment";
import { connect } from "dva";
import ExportBtn from "../../../components/exportBtn";
import styles from "./index.less";

const { RangePicker } = DatePicker;
const { Search } = Input;

@connect(stores => ({
  systemManager: stores.systemManager
}))
class SensitiveLogPage extends Component {
  state = {
    selectedId: [],
    timeStart: "",
    timeEnd: "",
    dsNameOrOwner: "",
    pageNum: 1,
    pageSize: 10,
    ascOrDesc: "desc",
    totalCount: 0,
    loading: false,
    exportLoading: false
  };

  componentDidMount() {
    this.getData();
  }

  dateChange = (e = []) => {
    this.setState(
      {
        timeStart: e.length ? e[0].format("YYYY-MM-DD 00:00:00") : undefined,
        timeEnd: e.length ? e[1].format("YYYY-MM-DD 23:59:59") : undefined,
        pageNum: 1
      },
      () => {
        this.getData();
      }
    );
  };

  handleTableChange = (e, filters, sorter) => {
    const { current, pageSize } = e;
    this.setState(
      {
        pageNum: current,
        pageSize,
        ascOrDesc: sorter.order && sorter.order === "ascend" ? "asc" : "desc"
      },
      () => {
        this.getData();
      }
    );
  };

  handleSearch = e => {
    this.setState(
      {
        dsNameOrOwner: e,
        pageNum: 1
      },
      () => {
        this.getData();
      }
    );
  };

  clearChange = e => {
    if (e.target.value !== "") return;
    this.setState(
      {
        dsNameOrOwner: "",
        pageNum: 1
      },
      () => {
        this.getData();
      }
    );
  };

  getData = () => {
    const {
      timeStart,
      timeEnd,
      dsNameOrOwner,
      pageNum,
      pageSize,
      ascOrDesc
    } = this.state;
    const { dispatch } = this.props;
    this.setState({
      loading: true
    });
    const params = {
      timeStart,
      timeEnd,
      dsNameOrOwner,
      ascOrDesc,
      pageNum,
      pageSize
    };
    dispatch({
      type: "systemManager/fetchSensitiveLogList",
      payload: { ...params }
    }).then(totalCount => {
      this.setState({
        totalCount,
        loading: false
      });
    });
  };

  exportExcel = type => {
    const {
      dispatch,
      systemManager: { sensitiveLogList = [] } = {}
    } = this.props;
    const {
      selectedId,
      ascOrDesc,
      dsNameOrOwner,
      timeStart,
      timeEnd
    } = this.state;
    if (sensitiveLogList.length <= 0) {
      message.error("当前没有导出内容", 1);
      return;
    }
    if (type !== "all" && selectedId.length <= 0) {
      message.error("请选择需要导出的内容", 1);
      return;
    }
    this.setState({
      exportLoading: true
    });
    const payload = {
      timeStart,
      timeEnd,
      dsNameOrOwner,
      ascOrDesc,
      pageNum: 1,
      pageSize: 10000,
      sensitiveLogIds: type === "all" ? [] : selectedId
    };

    dispatch({
      type: "systemManager/exportSensitiveExcel",
      payload
    }).then(() => {
      this.setState({
        exportLoading: false
      });
    });
  };

  handleDisabledDate = current => current < moment().subtract(6, "months");

  render() {
    const {
      systemManager: { sensitiveLogList = [] }
    } = this.props;
    const { loading, pageNum, totalCount, exportLoading } = this.state;
    const rowSelection = {
      onChange: selectedRowKeys => {
        this.setState({
          selectedId: selectedRowKeys
        });
      }
    };
    const columns = [
      {
        title: "告警时间",
        dataIndex: "conflictTime",
        sorter: true,
        defaultSortOrder: "descend",
        render: text =>
          text ? moment(text).format("YYYY-MM-DD HH:mm:ss") : "---"
      },
      {
        title: "现数据源管理者",
        dataIndex: "conflictUserName",
        render: text => <span title={text}>{text}</span>
      },
      {
        title: "现归属部门",
        dataIndex: "conflictDeptName",
        render: text => <span title={text}>{text}</span>
      },
      {
        title: "详情",
        dataIndex: "details",
        render: text => <span title={text}>{text}</span>
      },
      {
        title: "原数据源管理者",
        dataIndex: "originUserName",
        render: text => <span title={text}>{text}</span>
      },
      {
        title: "原归属部门",
        dataIndex: "originDeptName",
        render: text => <span title={text}>{text}</span>
      }
    ];
    return (
      <div className={styles.root}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginBottom: 16
          }}
        >
          <ExportBtn
            exportExcel={type => this.exportExcel(type)}
            loading={exportLoading}
          />
          <div
            style={{
              fontSize: 14,
              color: "rgba(0,0,0,0.85)",
              display: "flex",
              alignItems: "center"
            }}
          >
            告警时间：
            <RangePicker
              style={{ width: 224, marginRight: 21 }}
              onChange={this.dateChange}
              disabledDate={this.handleDisabledDate}
            />
            <Search
              placeholder="现数据源管理者、详情"
              style={{ width: 272 }}
              onSearch={this.handleSearch}
              allowClear
              onChange={this.clearChange}
            />
          </div>
        </div>
        <Table
          rowKey={record => record.sensitiveLogId}
          columns={columns}
          dataSource={sensitiveLogList}
          size="middle"
          rowSelection={rowSelection}
          loading={loading}
          locale={{ emptyText: "暂无数据！" }}
          onChange={(e, filters, sorter) =>
            this.handleTableChange(e, filters, sorter)
          }
          pagination={{
            defaultPageSize: 10,
            showQuickJumper: true,
            showSizeChanger: true,
            current: pageNum,
            total: totalCount,
            showTotal: total => `共有 ${total} 条`
          }}
        />
      </div>
    );
  }
}

export default SensitiveLogPage;
